<template>
	<!--  <div-->
	<!--       ref="login"-->
	<!--       @keyup.enter.native="handleLogin">-->
	<el-container>
		<el-header></el-header>
		<el-main>
			<div class="item"
				style="width: 100%;display: flex;justify-content: center;align-items: center;margin-top:40px;margin-bottom: 14px">
				<img style="width: 104px; height: 104px" src="/img/login/dl_logo@2x.png">
			</div>
			<div class="item spanDiv">
				<span class="fontStyle">
					辽中分局便捷出警系统
				</span>
				<span class="spanSty">
					Liaozhong branch convenient police system
				</span>
			</div>
			<div class="item">

			</div>
			<div class="item" style="margin-top: 37px">
				<div style="border: 1px solid white;border-radius: 10px;width:785px;height:365px;">
					<div class="logdiv"
						style="background-color:white;width:770px;height:324px;margin:7px 7px 7px 8px;border-radius: 0 0 10px 10px;opacity: 0.95;padding-top:27px">
						<div
							style="font-size: 24px;font-weight:bold;display: flex;justify-content: center;color:#2E488B;margin-bottom: 34px">
							— 平台登录 —
						</div>
						<div style="width:380px;">
							<user-login></user-login>
						</div>
					</div>
				</div>
			</div>
		</el-main>
		<el-footer>
			<div class="login-img">
				<img style="width: 74px; height: 74px" src="/img/login/dl_jiguan.png">
			</div>
			<div style="color: white;margin-left: 10px">Copyright © 2023 All Right Reserved 地址: 辽宁省沈阳市XX区XX路XX号 / 辽ICP备09028XXX号-4 辽宁省沈阳市 辽中分局 版权所有</div>
		</el-footer>
	</el-container>

	<!--  </div>-->
</template>
<script>
	import userLogin from "./userlogin";
	import codeLogin from "./codelogin";
	import thirdLogin from "./thirdlogin";
	import {
		mapGetters
	} from "vuex";
	import {
		validatenull
	} from "@/util/validate";
	import topLang from "@/page/index/top/top-lang";
	import topColor from "@/page/index/top/top-color";
	import {
		getQueryString,
		getTopUrl
	} from "@/util/util";

	export default {
		name: "login",
		components: {
			userLogin,
			codeLogin,
			thirdLogin,
			topLang,
			topColor
		},
		data() {
			return {
				socialForm: {
					tenantId: "000000",
					source: "",
					code: "",
					state: "",
				}
			};
		},
		watch: {
			$route() {
				this.handleLogin();
			}
		},
		created() {
			this.handleLogin();
		},
		mounted() {},
		computed: {
			...mapGetters(["website", "tagWel"])
		},
		props: [],
		methods: {
			handleLogin() {
				const topUrl = getTopUrl();
				const redirectUrl = "/oauth/redirect/";
				this.socialForm.source = getQueryString("source");
				this.socialForm.code = getQueryString("code");
				this.socialForm.state = getQueryString("state");
				if (validatenull(this.socialForm.source) && topUrl.includes(redirectUrl)) {
					let source = topUrl.split("?")[0];
					source = source.split(redirectUrl)[1];
					this.socialForm.source = source;
				}
				if (!validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this
						.socialForm.state)) {
					const loading = this.$loading({
						lock: true,
						text: '第三方系统登录中,请稍后。。。',
						spinner: "el-icon-loading"
					});
					this.$store.dispatch("LoginBySocial", this.socialForm).then(() => {
						window.location.href = topUrl.split(redirectUrl)[0];
						this.$router.push({
							path: this.tagWel.value
						});
						loading.close();
					}).catch(() => {
						loading.close();
					});
				}
				// this.$router.push({path:'/wel/index'})
			}

		}
	};
</script>

<style lang="scss">
	/*@import "@/styles/login.scss";*/
	/*@import "../../styles/login.scss";*/
	.el-header {
		background-color: #2F5EA4;
		text-align: center;
		height: 20px !important;
	}

	.el-footer {
		background-color: #2F5EA4;
		text-align: center;
		height: 125px !important;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.el-main {
		flex-direction: column;
		background-image: url('/img/login/dl_bg.png');
		background-repeat: no-repeat;
		background-size: cover;
		height: 100% !important;
		display: flex;
		/*justify-content: center;*/
		/*align-items: flex-start;*/
	}

	.item {
		width: 100%;
		display: flex;
		justify-content: center;
		/* 添加伪元素来占据剩余空间 */
		/*flex-grow: 1;*/
	}

	/*!* 移除最后一个项目之后的伪元素的外边距 *!*/
	/*.item:last-child::after {*/
	/*  content: "";*/
	/*  display: block;*/
	/*  margin-bottom: 0;*/
	/*}*/
	.spanDiv {

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.fontStyle {
		font-size: 38px;
		font-family: Lantinghei SC, Lantinghei SC;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 45px;
	}

	.spanSty {
		font-size: 15px;
		font-family: Lantinghei SC, Lantinghei SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 13px;
		letter-spacing: 1px;
	}

	.logdiv {
		flex-direction: column;
		display: flex;
		align-items: center;
	}
</style>